<template>
  <div class="uploadimg">
    <el-upload
      :action="actionUrl"
      :on-preview="handlePreview"
      :before-upload="beforeUploadImg"
      :on-remove="handleRemove"
      :file-list="fileList"
      :on-exceed="handleExceed"
      :http-request="uploadFile"
      :limit="limit"
      :disabled="disableIinput"
      list-type="picture-card">
      <i class="el-icon-plus" />
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <img :src="dialogImageUrl" width="100%" alt="">
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  /* eslint-disable vue/require-prop-types */
  props: ['imgLogoUrl', 'status', 'newType'],
  data() {
    return {
      disableIinput: false,
      actionUrl: '',
      dialogImageUrl: '',
      dialogVisible: false,
      uploadDisabled: false,
      fileList: [],
      limit: 1,
      deleteImageList: []
    }
  },
  beforeMount() {
    if (this.newType === 1) {
      this.limit = 9
    } else {
      this.limit = 1
    }
    console.log(this.limit)

    if (this.status !== 1) {
      this.getImg()
    }

    if (this.status === 3) {
      this.disableIinput = true
    }
  },
  created() {
    console.log('newType', this.newType)
    this.fileList = []
    this.initUploadFileurl()

    console.log('this.fileList', this.fileList)
  },
  methods: {
    initUploadFileurl() {
      this.actionUrl = process.env.BASE_API + 'file/uploadImageAndCrtThumbImages'
    },
    // 上传前回调
    beforeUploadImg(file) {
      const isGIF = file.type === 'image/gif'
      const isPNG = file.type === 'image/png'
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size < 1048576

      if (!isJPG && !isGIF && !isPNG) {
        this.$message.error('上传图片必须是JPG/GIF/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过 1M!')
      }
      return (isJPG || isGIF || isPNG) && isLt2M
    },
    getImg() {
      console.log('imglogoURl', this.imgLogoUrl)
      const that = this
      if (this.imgLogoUrl !== '' && this.imgLogoUrl !== null && this.imgLogoUrl !== undefined) {
        if (this.imgLogoUrl instanceof Array) {
          console.log('是否是数组：', this.imgLogoUrl instanceof Array)

          for (let i = 0; i < this.imgLogoUrl.length; i++) {
            const obj = {}
            obj.url = this.imgLogoUrl[i]
            console.log('this.imgLogoUrl[i]', this.imgLogoUrl[i])
            that.fileList.push(obj)
          }
          console.log('fileList', that.fileList)
        } else {
          const obj = {}
          obj.url = this.imgLogoUrl
          this.fileList.push(obj)
          console.log('fileList', that.fileList)
        }
      }
    },
    uploadFile(content) {
      const fd = new FormData()
      fd.append('images', content.file)
      fd.append('resPath', this.resPath)

      axios.post(content.action, fd).then(res => {
        console.log('上传图片的响应', res)
        if (res.data.code === 1) {
          const obj = {}
          obj.url = this.HOSTURL + '' + res.data.data[0].maxImageUrl
          this.fileList.push(obj)
          console.log('this.fileList', this.fileList)
          if (this.newType === 1) {
            this.$emit('editSuccess', this.fileList)
          } else if (this.newType === 2) {
            this.$emit('editSuccess', this.HOSTURL + '' + res.data.data[0].maxImageUrl)
          }

          this.$message({
            message: '上传成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: res.data.msg,
            type: 'warning'
          })
        }
      })
    },
    incrementTotal() {
      console.log('需要发送的图片数据：', this.fileList)
      this.$emit('emitSuccess', this.fileList)
    },
    handleRemove(file, fileList) {
      var _this = this
      this.fileList.forEach(function(item, index) {
        if (file.uid === item.uid) {
          _this.fileList.splice(index, 1)
        }
      })
      console.log(_this.fileList)
      this.$emit('deleteSuccess', _this.fileList)
    },
    handlePreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleExceed(files, fileList) {
      this.$message({
        message: '最多只能上传一张',
        type: 'warning'
      })
    }
  }
}
</script>

<style type="text/scss" lang="scss">
	.uploadimg{
		overflow: hidden;
		clear: both;
  }
</style>
